<template>
  <div style="width:100%;">
    <waterfall :ref="'refWaf_' + id" :line-gap="gap" :watch="list" style="position: relative" v-if="false">
    <waterfall-slot move-class="item-move" v-for="(item, index) in list" :data-index="index"
      :width="item.sw ? item.sw : 0" :height="item.sh ? item.sh : 0" :order="index"
      :key="'pr-waf-g-' + item.id + '_' + index">
      <div class="waf-ligan-item" :class="{ active: selectIds.length > 0, 'act-bodr': item.selected }">
        <a :href="'/imgv/' + item.thumbnailBean.id" @click.prevent="handleShowInfo(item, index)">
          <img loading="lazy" class="m-img" :srcset="item.srcsets" v-lazy="item.lazy" />
          <template v-if="item.ratios">
            <div v-for="(ot, otx) in item.ratios" :key="'rto-' + otx"
              :style="'width:' + (ot.otwidth / ot.imgWidth) * 100 + '%;height:' + (ot.otheight / ot.imgHeight) * 100 + '%;left:' + ((ot.otcenterX - ot.otwidth / 2) / ot.imgWidth) * 100 + '%;top:' + ((ot.otcenterY - ot.otheight / 2) / ot.imgHeight) * 100 + '%'"
              class="outer-box"></div>
          </template>
        </a>
        <div class="hid-el author">
          <a class="ar-tit" target="_blank"
            :href="(item.categoryTopId || item.article_category_top_id == 22) ? '/game/' + item.articleid : '/article/' + item.articleid"
            :title="item.title">{{ item.title }}</a>
        </div>
        <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
          <i class="sm-tip" slot-content>找相似</i>
          <a target="_blank" slot="reference" @click.stop="toSearchByImg(item)" class="hid-el xs-img-btn"></a>
        </el-popover>

        <a target="_blank" href="/searchByImageList" class="hid-el like-img-btn"></a>
        <div class="global-img-fun-pos">
          <template v-if="!isfolderinfo">
            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
              <i class="sm-tip" slot-content>{{ item.collectImageCount > 0 ? '取消收藏' : '收藏' }}</i>
              <a slot="reference" class="hid-el fav-btn" :class="{ 'active': item.collectImageCount > 0 }"
                @click.stop="item.selected = true; showFav = true"></a>
            </el-popover>
            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
              <i class="sm-tip" slot-content>{{ item.praiseCount > 0 ? '取消喜欢' : '喜欢' }}</i>
              <a slot="reference" class="hid-el global-parise-btn" :class="{ 'active': item.praiseCount > 0 }"
                @click.stop="handlePraise(item)">{{ item.praise }}</a>
            </el-popover>
          </template>
          <el-popover popper-class="gm-info-pop" v-else placement="top-start" trigger="hover">
            <i class="sm-tip" slot-content>编辑</i>
            <a slot="reference" class="img-edit hid-el" title="编辑" @click.stop="handleEmitEdit(item, index)"></a>
          </el-popover>
        </div>

        <el-popover popper-class="gm-info-pop" v-if="islogin" placement="top-start" trigger="hover">
          <i class="sm-tip" slot-content>多选</i>
          <a slot="reference" class="hid-el select-btn" :class="{ active: item.selected }"
            @click="item.selected = !item.selected"></a>
        </el-popover>

        <div class="bot-mask" @click.stop="handleShowInfo(item, index)"></div>
      </div>
    </waterfall-slot>

    <div class="select-d-fix" :class="{ active: selectIds.length > 0 }" v-if="selectIds.length > 0">
      <div class="box">
        <div class="num">
          已选中<i>{{ selectIds.length }}</i>个 <i class="cancel-select" @click="handleCancelSelect"></i>
        </div>
        <a class="select-all" @click="handleSelectAll">{{ isCkAll ? '取消全选' : '全选' }}</a>
        <a class="fav-to" @click="showFav = true" v-if="!iscancel">保存到收藏</a>
        <a class="fav-to" @click="handleCancelFav" v-else>取消收藏</a>
        <a class="move-to" @click="handleMoveTo" v-if="ismove">移动到</a>
        <a class="download-to" @click="handleDownloads">下载选中</a>
      </div>
    </div>

    <a-modal v-model="showFav" destroyOnClose centered :footer="null" :closable="false" width="471px">
      <Fav @close="showFav = false" :foldertype="0" :ismove="ismove" :collectIds="selectCollectIds" :imgids="selectIds"
        @favsucc="onFavSucc" />
    </a-modal>

    <ImgDetail @close="onInfoClose" :imgurl="currentImgUrl" :imgid="curImgId" :olist="list" :viewidx="curViewidx"
      v-if="showInfo" />
    </waterfall>

    <div class="demo-texts">
      <div class="demo-text">accordion drill</div>
      <div class="demo-text">olins lind accordion drill</div>
      <div class="demo-text">rock acoustic bass and drun</div>
      <!-- <div class="demo-text">accordion drill</div>
      <div class="demo-text">olins lind accordion drill</div>
      <div class="demo-text">rock acoustic bass and drun</div>
      <div class="demo-text">accordion drill</div>
      <div class="demo-text">olins lind accordion drill</div>
      <div class="demo-text">rock acoustic bass and drun</div>
      <div class="demo-text">accordion drill</div>
      <div class="demo-text">olins lind accordion drill</div>
      <div class="demo-text">rock acoustic bass and drun</div> -->
    </div>

    <div v-masonry transition-duration="0.3s" :gutter="10" item-selector=".ms-item" v-if="false">
      <div v-masonry-tile class="ms-item" v-for="(item, index) in list" :key="index">
        <div class="n-box">
          <a :href="'/imgv/' + item.thumbnailBean.id" @click.prevent="handleShowInfo(item, index)">
          <img loading="lazy" class="m-img" :srcset="item.srcsets" v-lazy="item.lazy" />
          <template v-if="item.ratios">
            <div v-for="(ot, otx) in item.ratios" :key="'rto-' + otx"
              :style="'width:' + (ot.otwidth / ot.imgWidth) * 100 + '%;height:' + (ot.otheight / ot.imgHeight) * 100 + '%;left:' + ((ot.otcenterX - ot.otwidth / 2) / ot.imgWidth) * 100 + '%;top:' + ((ot.otcenterY - ot.otheight / 2) / ot.imgHeight) * 100 + '%'"
              class="outer-box"></div>
          </template>
        </a>
        <div class="hid-el author">
          <a class="ar-tit" target="_blank"
            :href="(item.categoryTopId || item.article_category_top_id == 22) ? '/game/' + item.articleid : '/article/' + item.articleid"
            :title="item.title">{{ item.title }}</a>
        </div>
        <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
          <i class="sm-tip" slot-content>找相似</i>
          <a target="_blank" slot="reference" @click.stop="toSearchByImg(item)" class="hid-el xs-img-btn"></a>
        </el-popover>

        <a target="_blank" href="/searchByImageList" class="hid-el like-img-btn"></a>
        <div class="global-img-fun-pos">
          <template v-if="!isfolderinfo">
            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
              <i class="sm-tip" slot-content>{{ item.collectImageCount > 0 ? '取消收藏' : '收藏' }}</i>
              <a slot="reference" class="hid-el fav-btn" :class="{ 'active': item.collectImageCount > 0 }"
                @click.stop="item.selected = true; showFav = true"></a>
            </el-popover>
            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
              <i class="sm-tip" slot-content>{{ item.praiseCount > 0 ? '取消喜欢' : '喜欢' }}</i>
              <a slot="reference" class="hid-el global-parise-btn" :class="{ 'active': item.praiseCount > 0 }"
                @click.stop="handlePraise(item)">{{ item.praise }}</a>
            </el-popover>
          </template>
          <el-popover popper-class="gm-info-pop" v-else placement="top-start" trigger="hover">
            <i class="sm-tip" slot-content>编辑</i>
            <a slot="reference" class="img-edit hid-el" title="编辑" @click.stop="handleEmitEdit(item, index)"></a>
          </el-popover>
        </div>

        <el-popover popper-class="gm-info-pop" v-if="islogin" placement="top-start" trigger="hover">
          <i class="sm-tip" slot-content>多选</i>
          <a slot="reference" class="hid-el select-btn" :class="{ active: item.selected }"
            @click="item.selected = !item.selected"></a>
        </el-popover>

        <div class="bot-mask" @click.stop="handleShowInfo(item, index)"></div>
      </div>
        </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import JSZip from 'jszip';
// import ImgDetail from './ImgDetail'
import api from '@/api/api'
import Fav from '@/components/Fav'
import SparkMD5 from 'spark-md5'
import Waterfall from 'vue-waterfall/lib/waterfall'
import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'
export default {
  components: {
    Waterfall,
    WaterfallSlot,
    Fav,
    // ImgDetail
    ImgDetail: () => import('../components/ImgDetail')
  },
  props: {
    id: String,
    iscancel: Boolean,
    isxscallback: Boolean,
    isfolderinfo: Boolean,
    ismove: Boolean
  },
  data() {
    return {
      containerId:'masonry-box',
      columns: 6,
      list: [],
      removeEls: [],
      singleMaxWidth: 0,
      islogin: false,
      curFullPath: '',
      showInfo: false,
      gap: 273,
      isCkAll: false,
      curViewidx: 0,
      curImgId: '',
      scrollLoaded: false,
      currentImgUrl: '',
      showFav: false,
      queryParams: {
        pageNum: 1,
        pageSize: 70,
        orderByColumn: 'createTime',
        isAsc: 'desc',
        rank: '首页推荐',
        color: '',
        categoryId: 22
      },
    }
  },
  watch: {
    columns() {
      if (this.list.length > 0) {
        let that = this;
        setTimeout(() => {
          that.initLineGap();
        }, 400)
      }
    }
  },
  computed: {
    selectIds() {
      // let datas = this.list.filter((r) => {
      //   return r.selected
      // })
      // let ids = datas.map((item) => {
      //   return item.thumbnailBean.id
      // })
      // this.isCkAll = ids.length == this.list.length
      // return ids
      return [];
    },
    selectCollectIds() {
      // let datas = this.list.filter((r) => {
      //   return r.selected
      // })
      // let ids = datas.map((item) => {
      //   return item.collectId;
      // })
      // return ids
      return [];
    },
  },
  destroyed() {
    // window.removeEventListener('resize',this.initLineGap)
  },
  methods: {
        calculateTilt(corners){
            const{x:x1,y:y1}=corners[0];//左上
            const{x:x2,y:y2}=corners[1];// 右上
            // 计算 dy 和 dx
            const dy=y2-y1;
            const dx=x2-x1;
            //计算倾角(弧度->角度)
            const angle =Math.atan2(dy,dx)*(180 /Math.PI);
            // 返回角度
            return angle;
        },
    async queryList() {
      var that = this;

      this.isloading = true;
      const loading = this.$loading({
        lock: true,
        text: '努力加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      api.searchImgs(that.queryParams).then(result => {
        loading.close();
        that.isloading = false;

        let old = that.list;

        let datas = result.data.images.list;
        datas.forEach(item => {
          item.show=false;item.showOther=false;
          that.$bhelper.convertImgItem(item,that);
        })

        if(datas.length>0)
          that.queryParams.last=datas[datas.length-1].id;

        that.list = [...old, ...datas];

        that.total = result.total;

        if (result.data && (result.data.length < that.queryParams.pageSize || result.data.length == 0)||datas.length<that.queryParams.pageSize) {
          that.hasMore = false;
        } else {
          that.hasMore = true;
        }
        that.scrollLoaded = true;
      }).catch(res => {
        loading.close();
        that.isDataError = true;
      })
    },
    onLoaded(e, item) {
      let domainUrl = this.$imgdomainurl;
      let el = e.target;
      let _vtime = null;
      if (item.updateTime) {
        _vtime = item.updateTime;
      } else if (item.createTime) {
        _vtime = item.createTime;
      } else if (item.create_time) {
        _vtime = item.create_time.replace('T', ' ');
      }
      _vtime = Math.abs(new Date(_vtime).getTime());
      let srcsets = [];
      srcsets.push(domainUrl + item.id + '-' + _vtime + '@1x560.webp 1x');
      srcsets.push(domainUrl + item.id + '-' + _vtime + '@2x560.webp 2x');
      srcsets.push(domainUrl + item.id + '-' + _vtime + '@3x560.webp 3x');
      el.srcset = srcsets.join(',')
    },
    getimgObj(item) {
      let _vtime = null;
      if (item.updateTime) {
        _vtime = item.updateTime;
      } else if (item.createTime) {
        _vtime = item.createTime;
      } else if (item.create_time) {
        _vtime = item.create_time.replace('T', ' ');
      }
      _vtime = Math.abs(new Date(_vtime).getTime());
      return {
        src: this.$imgdomainurl + item.id + '-' + _vtime + '@1x560.webp',
        error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
        loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
      }
    },
    getImgParams(item) {
      let prams = {
        id: item.id,
        w: parseInt(this.gap) * 2,
        uptime: '',
        isimg: true
      };
      if (item.updateTime) {
        prams.uptime = item.updateTime;
      } else if (item.createTime) {
        prams.uptime = item.createTime;
      } else if (item.create_time) {
        prams.uptime = item.create_time.replace('T', ' ');
      }
      return prams;
    },
    handleMoveTo() {
      this.showFav = true;
    },
    handleEmitEdit(item, index) {
      this.$emit('ineditimg', item, index);
    },
    async handleCancelFav() {
      let res = await api.batchCancelFavSinglePic(this.selectCollectIds);
      if (res.code == 0) {
        this.$amessage.success('已取消收藏');
        this.$emit('cancelfav', this.selectCollectIds)
      }
    },
    async handlePraise(item) {
      if (!localStorage.getItem('token')) {
        window.history.pushState({}, 0, '/?login=true');
        return;
      }
      if (item.praiseCount > 0) {
        let res = await api.delPraise({ type: 4, praiseId: item.id });
        if (res.code == 0) {
          this.$amessage.success('取消喜欢~');
          item.praise -= 1;
          item.praiseCount = 0;
        }
      } else {
        let res = await api.addPraise({ type: 4, praiseId: item.id });
        if (res.code == 0) {
          this.$amessage.success('已喜欢，品味不错哦～~')
          item.praise += 1;
          item.praiseCount = 1;
        }
      }
    },
    toSearchByImg(item) {
      let that = this;
      //方法二
      let canvas = document.createElement('canvas');
      let img = document.createElement('img');
      // 解决跨域 Canvas 污染问题

      img.setAttribute("crossOrigin", '*');

      // that.isSearching = true;

      // that.isFocus = false;
      img.onload = function (e) {
        canvas.width = img.width;
        canvas.height = img.height;
        let context = canvas.getContext('2d');
        //绘制图片
        context.drawImage(img, 0, 0, img.width, img.height);
        canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

        const base64 = canvas.toDataURL('image/jpeg')
        localStorage.setItem('tmp_im_b64', base64);
        that.isFocus = false;
        if (that.$route.name == 'searchByImageList') {
          location.href = '/searchByImageList?t=' + Date.parse(new Date())
        } else {
          let routeData=this.$router.resolve({  path: '/searchByImageList?t='+Date.parse(new Date())})
          window.open(routeData.href, '_blank');
        }
        return;
      }
      //将资源链接赋值过去，才能触发img.onload事件
      img.src = item.thumbnail || item.thumbnailBean.thumbnail;
    },
    onInfoClose() {
      window.history.pushState({}, 0, this.curFullPath);
      document.body.style.overflow = 'inherit';
      this.showInfo = false;
    },
    handleCancelSelect() {
      this.list.map((item) => {
        item.selected = false
      })
      this.isCkAll = false
    },
    onFavSucc() {
      this.list.map((item) => {
        item.selected = false
      })
      this.showFav = false
    },
    handleDownloads() {
      let that = this
      let datas = this.list.filter((r) => {
        return that.selectIds.includes(r.thumbnailBean.id)
      })
      this.zip(datas)
    },
    zip(arr) {
      this.$amessage.info('下载中,请稍候...')
      var zip = new JSZip()
      let folerName = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
      // 创建images文件夹
      var imgFolder = zip.folder(folerName)
      let flag = 0 //  判断加载了几张图片的标识
      let that=this;
      for (let i = 0; i < arr.length; i++) {
        //遍历数组arr
        this.getBase64(arr[i].thumbnail).then((base64) => {
          //调用getBase64()方法,传入图片网络地址得到base64数据
          base64 = base64.split('base64,')[1]
          imgFolder.file(arr[i].thumbnail.substring(arr[i].thumbnail.lastIndexOf('/') + 1) + '.png', base64, { base64: true }) //自定义图片名字，存进images文件夹里面
          if (flag === arr.length - 1) {
            zip.generateAsync({ type: 'blob' }).then((blob) => {
              saveAs(blob, folerName + '.zip') //自定义文件压缩包名字
              that.$amessage.success('下载完成')
            })
          }
          flag++
        })
      }
    },
    //传入图片地址，返回base64格式数据
    getBase64(img) {
      var image = new Image()
      image.crossOrigin = '*' //解决图片跨域问题
      image.src = img
      return new Promise((resolve, reject) => {
        image.onload = () => {
          resolve(this.getBase64Image(image))
        }
      })
    }, //创建画布，将图片渲染到画布上，再将画布转为base64格式数据返回出来
    getBase64Image(img, width, height) {
      var canvas = document.createElement('canvas')
      canvas.width = width ? width : img.width
      canvas.height = height ? height : img.height
      var ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
      var dataURL = canvas.toDataURL()
      return dataURL
    },
    handleSelectAll() {
      let that = this
      if (that.selectIds.length != that.list.length) {
        this.list.map((item) => {
          item.selected = true
        })
      } else {
        this.list.map((item) => {
          item.selected = !that.isCkAll
        })
      }
    },
    handleShowInfo(_item, _idx) {
      if (this.selectIds.length > 0) {
        _item.selected = !_item.selected
        return;
      }
      if (this.isxscallback) {
        this.$emit('choose', _item, _idx);
        return;
      }
      this.curViewidx = _idx
      this.curImgId = _item.thumbnailBean.id
      this.currentImgUrl = _item.src
      window.history.pushState({}, 0, '/imgv/' + _item.id)
      document.body.style.overflow = 'hidden'
      this.showInfo = true
    },
    onImgError(e) {
      e.target.src = require('../assets/pro/default_uimg.svg')
    },
    get_avatar_url(member = { id: '', avatar: '' }, n = 1, w = 30) {
      if (!member.id || !member.avatar) return this.defaultAvatar
      let hash = SparkMD5.hash(member.avatar).slice(0, 6)
      return `https://img.gameui.net/avatar-${member.id}-${hash}@${n}x${w}.webp`
    },
    get_avatar_urls(member = { id: '', avatar: '' }, w = 30) {
      return `${this.get_avatar_url(member, 1, w)} 1x, ${this.get_avatar_url(member, 2, w)} 2x, ${this.get_avatar_url(member, 3, w)} 3x`
    },
    initLineGap() {
      // _gap = _gap < 273 ? document.getElementsByClassName('vue-waterfall')[0].offsetWidth / 4 : _gap;
      let that = this;
      that.$nextTick(() => {
        let el = document.getElementsByClassName('vue-waterfall')[0];
        if (that.$refs['refWaf_1'])
          el = document.getElementsByClassName('vue-waterfall')[0];
        if (that.$refs['refWaf_2']) {
          el = document.getElementsByClassName('vue-waterfall')[1];
          if (!el) {
            el = document.getElementsByClassName('vue-waterfall')[0];
          }
        }
        if (el) {
          let _width = el.offsetWidth;
          let _col = that.columns;
          let _gap = 0;
          if (_width >= 1634) {
            _gap = _width / _col;
          }
          else if (_width > 1360 && _width < 1634) {
            _col = _col - 1;
            _gap = _width / _col;
          }
          else if (_width > 1055 && _width < 1360) {
            _col = _col - 2;
            _gap = _width / _col;
          }
          else if (_width > 750 && _width < 1055) {
            _col = _col - 3;
            _gap = _width / _col;
          }
          else if (_width > 445 && _width < 750) {
            _col = _col - 4;
            _gap = _width / _col;
          } else {
            _col = 1;
            _gap = _width / _col;
          }
          that.gap = _gap;
          setTimeout(() => {
            if (that.$refs['refWaf_1'])
              that.$refs['refWaf_1'].reflow();
            if (that.$refs['refWaf_2'])
              that.$refs['refWaf_2'].reflow();
          }, 200)
        }
      })
    },
    handleLoadingMore() {
      this.queryParams.pageNum++;
      this.queryList();
    },
    seeBox() {
      const config = {
        childList: true
      };
      const mobserver = new MutationObserver(function (mulist) {
        mulist.map(m=>{
          if (m.type === 'childList') {
            if(m.addedNodes.length>0){
            }
            if(m.removedNodes.length>0){
            }
          }
        })
      });
      mobserver.observe(document.querySelector('.vue-waterfall'), config);

      // window.addEventListener('resize',this.initLineGap)
      // 回调函数，在目标元素进入视口时触发  
      let that = this;
      function handleIntersect(entries, observer) {
        that.removeEls = [];
        entries.forEach(entry => {
          if (entry.intersectionRatio <= 0.1) {
            entry.target.style.visibility='hidden'
          }else{
            entry.target.style.visibility='visible'
          }
        });
      }

      // 创建一个Intersection Observer实例  
      const options = {
        root: null, // 使用视口作为根  
        rootMargin: '0px 0px 0px 0px', // 可以在视口外50px处就开始加载  
        threshold: 0.1, // 当目标元素的可见性达到视口的10%时触发回调  
        trackVisibility: false,
        delay: 0
      };

      const observer = new IntersectionObserver(handleIntersect, options);

      // 获取所有需要懒加载的图片容器  
      const lazyImageContainers = document.querySelectorAll('.vue-waterfall-slot');

      // 为每个图片容器添加观察  
      lazyImageContainers.forEach(container => {
        observer.observe(container);
      });
    }
  },
  async mounted() {
    return;
    // let res=await api.searchImgs();
    // return;
    this.islogin = !!localStorage.getItem('token');
    this.curFullPath = this.$route.fullPath;
    let that = this;

    this.queryList();
    this.$nextTick(() => {
      // that.singleMaxWidth=that.$refs.refWaf_1.$el.clientWidth;
      setTimeout(() => {
        that.initLineGap();
        // that.seeBox();
      }, 600)
    })

    $(document).on('scroll', function (e) {
      // that.seeBox();
      let jHeight = document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight;

      if (that.scrollLoaded == false) return;

      if (jHeight <= 200 && that.hasMore) {
        that.scrollLoaded = false;
        that.handleLoadingMore();
      }
    })
  }
}
</script>

<style scoped lang="less">
.demo-texts{
  position: relative;
  .demo-text{
    position: absolute;
    font-size:14px;
    font-weight:500;
    width:200px;
    text-align: right;
    &:nth-child(1){
      top:0px;
      color:green;
      transform:translate(100%,100%) rotate(180deg);
    }
    &:nth-child(2){
      top:40px;
      color:red;
      transform:translate(100%,100%) rotate(180deg);
    }
    &:nth-child(3){
      top:80px;
      color:yellow;
    }
  }
}
.ms-item{
  width:calc(100% / 6);
  .n-box{
    // position: relative;
    // bottom:10px;
    // right:10px;
    // top:10px;
    // left:10px;
    margin:10px;
    &:hover {
    cursor: pointer;
    border: 2px solid #11CCB1;

    .hid-btn {
      display: inherit;
    }
  }

  .m-img {
    // border-radius: 16px;
    height: 100%;
    width: 100%;
    object-fit: cover;
    vertical-align: middle;
  }

  .author {
    position: absolute;
    bottom: 11px;
    left: 10px;
    // background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    // padding: 10px 13px;
    width: 164px;
    cursor: default;

    .ar-tit {
      font-size: 14px;
      font-weight: 500;
      color: #fff;
      line-height: 20px;
      // margin-bottom: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background: url('../assets/pro/take_tit_wht_icon.svg') no-repeat;
      background-position: left center;
      padding-left: 22px;
      display: inline-block;
      width: 100%;
    }

    .u-box {
      display: flex;
      padding-left: 20px;

      .name {
        font-size: 14px;
        color: #969696;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .avatar {
        width: 20px;
        height: 20px;
        border-radius: 20px;
        margin-right: 7px;
      }
    }
  }

  .xs-img-btn {
    background-image: url('../assets/pro/xs_img_cion.svg');
    background-repeat: no-repeat;
    background-position: center center;
    width: 32px;
    height: 32px;
    position: absolute;
    right: 10px;
    bottom: 11px;
    background-color: #fff;
    border-radius: 12px;
    cursor: pointer;
    opacity: 0.9;

    &:hover {
      opacity: 1;
    }
  }

  .hid-btn {
    display: none;
  }

  .hid-el {
    // display: none;
    transition: 0.1s all linear;
    opacity: 0;
  }

  .bot-mask {
    background: linear-gradient(transparent, #000);
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
    left: 0;
    z-index: -1;
    transition: all 0.2s linear;
  }

  &:hover {
    border: 2px solid #11CCB1;

    .bot-mask {
      z-index: 1;
    }

    .hid-el {
      opacity: 1;
      z-index: 2;
    }
  }

  &.active {
    .select-btn {
      opacity: 1;
    }
  }

  &.act-bodr {
    border: 2px solid #11CCB1;
  }
  }
}
.waf-ligan-item {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  // font-size: 1.2em;
  border: 2px solid #000;
  border-radius: 16px;
  // transition: 0.1s all linear;
  animation: opacity .2s linear;
  overflow: hidden;

  &:hover {
    cursor: pointer;
    border: 2px solid #11CCB1;

    .hid-btn {
      display: inherit;
    }
  }

  .m-img {
    // border-radius: 16px;
    height: 100%;
    width: 100%;
    object-fit: cover;
    vertical-align: middle;
  }

  .author {
    position: absolute;
    bottom: 11px;
    left: 10px;
    // background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    // padding: 10px 13px;
    width: 164px;
    cursor: default;

    .ar-tit {
      font-size: 14px;
      font-weight: 500;
      color: #fff;
      line-height: 20px;
      // margin-bottom: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background: url('../assets/pro/take_tit_wht_icon.svg') no-repeat;
      background-position: left center;
      padding-left: 22px;
      display: inline-block;
      width: 100%;
    }

    .u-box {
      display: flex;
      padding-left: 20px;

      .name {
        font-size: 14px;
        color: #969696;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .avatar {
        width: 20px;
        height: 20px;
        border-radius: 20px;
        margin-right: 7px;
      }
    }
  }

  .xs-img-btn {
    background-image: url('../assets/pro/xs_img_cion.svg');
    background-repeat: no-repeat;
    background-position: center center;
    width: 32px;
    height: 32px;
    position: absolute;
    right: 10px;
    bottom: 11px;
    background-color: #fff;
    border-radius: 12px;
    cursor: pointer;
    opacity: 0.9;

    &:hover {
      opacity: 1;
    }
  }

  .hid-btn {
    display: none;
  }

  .hid-el {
    // display: none;
    transition: 0.1s all linear;
    opacity: 0;
  }

  .bot-mask {
    background: linear-gradient(transparent, #000);
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
    left: 0;
    z-index: -1;
    transition: all 0.2s linear;
  }

  &:hover {
    border: 2px solid #11CCB1;

    .bot-mask {
      z-index: 1;
    }

    .hid-el {
      opacity: 1;
      z-index: 2;
    }
  }

  &.active {
    .select-btn {
      opacity: 1;
    }
  }

  &.act-bodr {
    border: 2px solid #11CCB1;
  }
}

.item-move {
  transition: all .5s cubic-bezier(.55, 0, .1, 1);
  -webkit-transition: all .5s cubic-bezier(.55, 0, .1, 1);
}
</style>